<template>
  <div>
    <div :class="tabLink === 'project' ? 'app-container special' : 'app-container'">
      <div class="top-box">
        <img src="@/assets/images/xmgl-5.png" class="logo" />
        <span class="el-dropdown-link" style="font-size: 18px">
          {{ projectInfo.cProNme }}<i class="el-icon-arrow-down" style="margin-left: 10px"></i>
        </span>
        <div class="list">
          <span :class="tabLink === 'project' ? 'check' : ''" @click="handleLink('project')">
            <img v-if="tabLink === 'project'" src="@/assets/images/gl-xz.png" class="icon" />
            <i v-else class="el-icon-menu"></i>
            项目概览
          </span>
          <span :class="tabLink === 'demand' ? 'check' : ''" style="margin: 0 35px" @click="handleLink('demand')">
            <img v-if="tabLink === 'demand'" src="@/assets/images/xq-xz.png" class="icon" />
            <img v-else src="@/assets/images/xq.png" class="icon" />
            需求
          </span>
          <span  :class="tabLink === 'task' ? 'check' : ''" @click="handleLink('task')">
            <img v-if="tabLink === 'task'" src="@/assets/images/rw-xz.png" class="icon" />
            <img v-else src="@/assets/images/rw-xz-41.png" class="icon" />
            任务
          </span>
          <span  :class="tabLink === 'defect' ? 'check' : ''" style="margin: 0 35px" @click="handleLink('defect')">
            <img v-if="tabLink === 'defect'" src="@/assets/images/qx-xz-109.png" class="icon" />
            <img v-else src="@/assets/images/qx.png" class="icon" />
            缺陷
          </span>
          <span :class="tabLink === 'membership' ? 'check' : ''" @click="handleLink('membership')">
            <img v-if="tabLink === 'membership'" src="@/assets/images/cy-19.png" class="icon" />
            <img v-else src="@/assets/images/cy-17.png" class="icon" />
            成员
          </span>
          <span :class="tabLink === 'serverInfoStick' ? 'check' : ''" @click="handleLink('serverInfoStick')" style="margin-left: 35px">
            <i v-if="tabLink === 'serverInfoStick'" class="el-icon-s-tools" />
            <i v-else class="el-icon-setting" />
            服务器信息维护
          </span>
        </div>
        <el-button class="back" @click="backHome">
          <img src="@/assets/images/back.png" />
          返回
        </el-button>
      </div>
      <div v-if="tabLink === 'project'" class="project">
        <div class="content">
          <el-card class="box-card up" style="margin-right: 10px">
            <div>
              <h3>{{ projectInfo.cProNme }} 项目</h3>
              <el-select v-model="projectInfo.cProState" placeholder="请选择项目状态" @change="rulesState" class="select">
                <el-option v-for="item in cProStateOption" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div class="info">
              <div class="item">
                <span class="label">负责人: </span>
                <span class="icon-name red" v-if="projectInfo.cProHeadNme">{{projectInfo.cProHeadNme[projectInfo.cProHeadNme.length - 1] }}</span>
                <span>{{ projectInfo.cProHeadNme }}</span>
              </div>
              <div class="item" style="margin: 10px 0">
                <span class="label">计划周期: </span>
                <span>{{ projectInfo.tStaTm }} ~ {{ projectInfo.tEndTm }}</span>
              </div>
              <div class="item">
                <span class="label">项目进度: </span>
                <el-progress :percentage="projectInfo.cProPace * 100 || 0" :show-text="false"></el-progress>
                <span class="red-text" style="margin-left: 5px">{{ projectInfo.cProPace * 100 }}%</span>
              </div>
              <div class="item" style="margin-top: 10px">
                <span class="label">项目描述: </span>
                <div class="cPrdDes" :title="projectInfo.cPrdDes">{{ projectInfo.cPrdDes }}</div>
              </div>
            </div>
            <img class="figure" src="@/assets/images/ct1.png" />
          </el-card>
          <el-card class="box-card up">
            <div class="title-box">
              统计
              <div class="line"></div>
            </div>
            <el-radio-group v-model="radio1" class="radio" @input="handleRadio">
              <el-radio-button label="1">全部</el-radio-button>
              <el-radio-button label="7">需求</el-radio-button>
              <el-radio-button label="13">任务</el-radio-button>
              <el-radio-button label="19">缺陷</el-radio-button>
            </el-radio-group>
            <div class="nums">- 共<span class="red-text">{{ listWorkNum.all }}</span>个工作项 -</div>
            <div class="bottom-box">
              <div class="item">
                <p style="font-size: 32px;color: #C50405;">{{ listWorkNum.not }}</p>
                <p class="text">未开始</p>
                <img src="@/assets/images/y1.png" />
              </div>
              <div class="item">
                <p style="font-size: 32px;color: #F7933B;">{{ listWorkNum.on }}</p>
                <p class="text">进行中</p>
                <img src="@/assets/images/y2.png" />
              </div>
              <div class="item">
                <p style="font-size: 32px;color: #2365EC;">{{ listWorkNum.done }}</p>
                <p class="text">开发完成</p>
                <img src="@/assets/images/y3.png" />
              </div>
              <div class="item">
                <p style="font-size: 32px;color: green;">{{ listWorkNum.test }}</p>
                <p class="text">测试完成</p>
                <img src="@/assets/images/y3.png" />
              </div>
              <div class="item">
                <p style="font-size: 32px;color: purple;">{{ listWorkNum.online }}</p>
                <p class="text">已上线</p>
                <img src="@/assets/images/y3.png" />
              </div>
            </div>
          </el-card>
        </div>
        <div class="content">
          <el-card class="box-card down" style="margin-right: 10px">
            <div class="title-box">
              项目工时<div class="line"></div>
            </div>
            <div style="display: flex">
              <div class="l nums-box">
                <div class="item">
                  <p class="num">{{ workTime.cProDou || 0 }} <span class="unit">h</span></p>
                  <p class="text">预估工时</p>
                </div>
                <div class="item">
                  <p class="num">{{ workTime.cProDou1 || 0 }} <span class="unit">h</span></p>
                  <p class="text">登记工时</p>
                </div>
                <div class="item" style="margin-top: 25px">
                  <p class="num">{{ workTime.cProDou2 || 0 }} <span class="unit">h</span></p>
                  <p class="text">剩余工时</p>
                </div>
                <div class="item" style="margin-top: 25px">
                  <p class="num">{{ workTime.cProDou4 || 0 }} <span class="unit">h</span></p>
                  <p class="text">
                    预估偏差
                    <span class="wh">
                  <el-tooltip content="预估偏差" effect="dark" placement="bottom">
                    <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
                  </el-tooltip>
                </span>
                  </p>
                </div>
              </div>
              <div class="r nums-box">
                <div class="item">
                  <p class="num">{{ (workTime.cProDou3 * 100).toFixed(2) || 0 }} <span class="unit">%</span></p>
                  <p class="text">
                    工时进度
                    <span class="wh" >
                  <el-tooltip content="工时进度" effect="dark" placement="bottom">
                    <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
                  </el-tooltip>
                </span>
                  </p>
                </div>
                <div class="item" style="margin-top: 38px">
                  <p class="num">{{ (workTime.cProDou5 * 100).toFixed(2) || 0 }} <span class="unit">%</span></p>
                  <p class="text">
                    预估偏差率
                    <span class="wh" >
                  <el-tooltip content="预估偏差率" effect="dark" placement="bottom">
                    <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
                  </el-tooltip>
                </span>
                  </p>
                </div>
              </div>
            </div>
            <div class="echarts">
              <p class="text-title">预估工时</p>
              <div class="estimate bor">
                <div class="chart yg" :style="{ width: workTime.cProDou3 * 100 + '%' }"></div>
              </div>
              <p class="text-title" style="margin-top: 20px">登记工时+剩余工时</p>
              <div class="estimate">
                <div class="chart dj" :style="{ width: registerWidth + '%' }"></div>
                <div class="chart sy" :style="{ width: surplusWidth + '%' }"></div>
              </div>
              <div class="legend">
                <div class="item">
                  <div class="icon1"></div>预估工时
                </div>
                <div class="item">
                  <div class="icon1 dj"></div>登记工时
                </div>
                <div class="item">
                  <div class="icon1 sy"></div>剩余工时
                </div>
                <div class="item">
                  <div class="icon1 pc"></div>预估偏差
                </div>
              </div>
            </div>
          </el-card>
          <el-card class="box-card down">
            <div class="title-box">
              燃尽图
              <span class="wh">
             <el-tooltip content="显示工作项和剩余工时" effect="dark" placement="bottom">
               <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
             </el-tooltip>
          </span>
              <div class="line"></div>
            </div>
            <el-radio-group v-model="radio2" class="radio" @input="handleRadio2">
              <el-radio-button label="1">工作项</el-radio-button>
              <el-radio-button label="2">剩余工时</el-radio-button>
            </el-radio-group>
            <div id="main" class="chart"></div>
            <div class="bottom-icon">
          <span>
           <span class="line"> —— </span>剩余工作项
            <span class="wh">
              <el-tooltip content="剩余工作项" effect="dark" placement="bottom">
               <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
              </el-tooltip>
            </span>
            <span class="line" style="margin-left: 20px"> ----- </span>基线
          </span>
            </div>
          </el-card>
        </div>
      </div>
      <demandIndex v-else-if="tabLink === 'demand'" />
      <taskIndex v-else-if="tabLink === 'task'" />
      <defectIndex v-else-if="tabLink === 'defect'" />
      <membershipIndex v-else-if="tabLink === 'membership'" />
      <serverInfoStick v-else />
    </div>
  </div>
</template>

<script>
import RuoYiDoc from "@/components/RuoYi/Doc";
import * as echarts from 'echarts';
import {mixin} from "../mixin";
import {listWorkEchars, listWorkNum, listWorkTime} from "@/api/projectManage/project";
import demandIndex from '../demand/index'
import taskIndex from '../task/index'
import defectIndex from '../defect/index'
import membershipIndex from '../membership/index'
import serverInfoStick from '../serverInfoStick/index'

export default {
  name: "projectOverview",
  mixins: [mixin],
  components: {RuoYiDoc, demandIndex, taskIndex, defectIndex, membershipIndex, serverInfoStick},
  computed:{
    registerWidth() {
      return this.workTime.cProDou1 / (this.workTime.cProDou1 + this.workTime.cProDou2) * 100
    },
    surplusWidth() {
      return 100 - this.registerWidth
    }
  },
  data() {
    return {
      radio1: '1',
      radio2: '1',
      listWorkNum: {
        all: 0,
        not: 0,
        on: 0,
        done: 0
      },
      listWorkNumAll: {},
      workTime: {},
      tabLink: 'project'
    }
  },
  watch: {
    tabLink: {
      handler(val) {
        // 更新燃尽图
        if (val === 'project') {
          this.$nextTick(() => this.getEchars())
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getWorkNum() {
      listWorkNum(this.projectInfo.cProNo).then(res => {
        const obj = res.data
        this.listWorkNumAll = obj
        this.listWorkNum = {
          all: obj.cProNum,
          not: obj.cProNum1,
          on: obj.cProNum2,
          done: obj.cProNum3,
          test: obj.cProNum4,
          online: obj.cProNum5,
        }
      })
    },
    // 校验项目状态
    rulesState() {
      // 当项目状态修改为已上线时
      if (this.projectInfo.cProState === '5') {
        // 需校验以下四个字段都已填写
        if (!this.projectInfo.cProAddr || !this.projectInfo.cDevAddr ||
          !this.projectInfo.cTestAddr || !this.upLoadImg) {
          this.$notify({
            title: '警告',
            message: '当项目状态修改为已上线时，(应用访问地址、应用开发环境、应用测试环境字段，应用详情)不可为空！',
            type: 'warning',
            duration: 8000
          })
          this.projectInfo.cProState = ''
        }
        return
      }
      this.$emit('upDate', this.projectInfo)
    },
    getListWorkTime() {
      listWorkTime(this.projectInfo.cProNo).then(res => {
        this.workTime = res.data
      })
    },
    getEchars() {
      listWorkEchars(this.projectInfo.cProNo).then(res => {
        this.$nextTick(() => {
          const {xList, dataList} = res.data
          this.initChart({xList, dataList})
        })
      })
    },
    commandProject() {},
    open(row) {
      console.log(row)
      this.getWorkNum()
      this.getListWorkTime()
    },
    backHome() {
      this.tabLink === 'project' ? this.$emit('toHome') : this.tabLink = 'project'
    },
    handleRadio() {
      let zIndex = Number(this.radio1)
      this.listWorkNum = {
        all: zIndex - 1 > 0 ? this.listWorkNumAll['cProNum' + (zIndex - 1)] : this.listWorkNumAll['cProNum'],
        not: this.listWorkNumAll['cProNum' + zIndex] || 0,
        on: this.listWorkNumAll['cProNum' + (zIndex + 1)] || 0,
        done: this.listWorkNumAll['cProNum' + (zIndex + 2)] || 0,
        test: this.listWorkNumAll['cProNum' + (zIndex + 3)] || 0,
        online: this.listWorkNumAll['cProNum' + (zIndex + 4)] || 0,
      }
    },
    handleRadio2() {
      console.log(this.radio2)
    },
    initChart({xList, dataList}) {
      const minVal = Math.min(...dataList)
      const chartDom = document.getElementById('main');
      const myChart = echarts.init(chartDom);
      const option = {
        xAxis: {
          type: 'category',
          data: xList,
          axisLabel:{
            fontSize:13,
            interval: 0,
            rotate: 30,
            margin: 20,
            color: '#333333'
          },

          axisLine: {//坐标轴轴线
            show: false
          },
          axisTick: {//坐标轴刻度
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize:13,
            color: '#999999'
          }
        },
        grid: {
          left: '5%',    // 距离左侧的距离
          right: '1%',   // 距离右侧的距离
          top: '6%',     // 距离顶部的距离
        },
        series: [
          {
            data: dataList,
            type: 'line',
            itemStyle: {
              color: '#FA7C2D'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(250,124,45,0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(250,124,45,0.1)'
                }
              ])
            },
            markLine: {
              symbol: 'none',
              data: [
                {
                  yAxis: minVal, // 自定义下限值
                  // name: '最小值', // 基准线名称
                  label: { // 不显示基准线名称
                    show: false,
                  },
                  lineStyle: {
                    type: 'dashed', // 基准线样式为虚线
                    color: '#b17063',
                  },
                },
              ],
            },
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/projectManage";

.special {
  padding: 0;
  .top-box {
    margin: 20px 20px 0 20px;
  }
  .project {
    padding: 20px 20px 100px 20px;
    background: #F1F2F5;
  }
}


.content {
  display: flex;
  .box-card {
    position: relative;
    flex: 1;
    padding-left: 5px;
    margin-top: 5px;
    h3 {
      margin: 10px 0 10px 0;
      font-weight: 700;
      font-size: 26px;
      font-family: Source Han Sans CN;
    }
    .figure {
      position: absolute;
      top: 12px;
      right: 15px;
    }
    .title-box {
      position: relative;
      padding-bottom: 10px;
      font-weight: 700;
      color: #C50405;
      font-size: 18px;
      border-bottom: 1px solid #b04a4a70;
      .line {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 126px;
        height: 2px;
        background: #C50405;
      }
    }
    .radio {
      margin: 10px 0 20px 50%;
      transform: translateX(-50%);
    }
    .nums {
      width: 152px;
      margin: 0 0 10px 50%;
      transform: translateX(-50%);
      font-family: Source Han Sans CN;
      font-size: 18px;
      font-weight: 700;
    }
    .bottom-box {
      display: flex;
      font-family: Source Han Sans CN;
      .item {
        flex: 1;
        text-align: center;
        .text {
          font-size: 16px;
          color: #333333;
        }
      }
    }
  }
  .up {
    height: 309px;
    .info {
      width: 785px;
      height: 157px;
      border-radius: 8px;
      opacity: 1;
      margin-top: 20px;
      padding: 10px 20px;
      font-family: Source Han Sans CN;
      font-size: 14px;
      font-weight: normal;
      background: linear-gradient(180deg, rgba(255, 235, 235, 0.59) 0%, rgba(255, 235, 235, 0) 100%);
      .label {
        width: 70px;
      }
      .item {
        display: flex;
        .cPrdDes {
          width: 680px;
          overflow: hidden;
        }
      }
      .icon-name {
        transform: translateY(1px);
      }
    }
  }
  .down {
    height: 501px;
    margin-top: 10px;
    .l {
      display: flex;
      flex-wrap: wrap;
      width: 500px;
      height: 160px;
      margin: 30px 0 20px 0;
      border-right: 1px solid #5b565629;
    }
    .r {
      display: flex;
      flex-wrap: wrap;
      width: 280px;
      height: 160px;
      padding-top: 28px;
      .item {
        width: 100%!important;
      }
    }
    .nums-box {
      .item {
        width: 50%;
        text-align: center;
        .num {
          font-size: 26px;
          font-weight: 700;
          .unit {
            font-size: 16px;
          }
        }
        .text {
          margin-top: 5px;
          font-size: 14px;
          font-weight: normal;
        }
      }
    }
  }
  .echarts {
    margin-top: 20px;
    padding-left: 70px;
    .text-title {
      font-size: 14px;
      font-weight: normal;
      margin-bottom: 10px;
    }
    .bor {
      border: 1px solid #FF0000;
    }
    .estimate {
      position: relative;
      width: 630px;
      height: 12px;
      .chart {
        position: absolute;
        height: 10px;
      }
      .yg {
        background: #FF8C00;
      }
      .dj {
        left: 0;
        background: #FFC2C2;
      }
      .sy {
        right: 0;
        background: #FF6161;
      }
    }
    .legend {
      display: flex;
      width: 580px;
      margin: 30px 0 0 60px;
      .item {
        flex: 1;
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: normal;
        .icon1 {
          width: 22px;
          height: 12px;
          background: #FF8C00;
          margin-right: 10px;
        }
        .dj {
          background: #FFC2C2;
        }
        .sy {
          background: #FF6161;
        }
        .pc {
          background: #FFFFFF;
          border: 1px solid #FF0000;
        }
      }
    }
  }
}
.wh {
  display: inline-block;
  color: #979797;
}
.chart {
  width: 100%;
  height: 300px;
}
.bottom-icon {
  color: #666666;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  .line {
    color: #FA7C2D;
    font-weight: 700;
    margin-right: 5px;
  }
}
.select {
  width: 100px;
}
</style>
